<script setup lang="ts">
import {useRouter} from 'vue-router';
import {showToast} from 'vant';
import {ref} from 'vue';
import type {API} from "@/type/type";
import {onMounted} from 'vue';
import {listQuestionTypeAPI} from "@/api/question";
import PracticeComponent from './components/PracticeComponent.vue';

const categories = ref<API.IQuestionType[]>([]);
const selectedCategoryId = ref<string>('');

onMounted(async () => {
  const {data} = await listQuestionTypeAPI();
  categories.value = data;
});

const router = useRouter();

const handleCategoryClick = (categoryId: string) => {
  selectedCategoryId.value = categoryId;
};

const handleBack = () => {
  selectedCategoryId.value = '';
};
</script>

<template>
  <div class="category-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="专项练习"
      left-text="返回"
      left-arrow
      @click-left="router.go(-1)"
    />

    <!-- 类别选择 -->
    <div v-if="!selectedCategoryId" class="category-grid">
      <div
        v-for="category in categories"
        :key="category.id"
        class="category-card"
        @click="handleCategoryClick(category?.id || '')"
      >
        {{ category.name }}
      </div>
    </div>

    <!-- 题目练习 -->
    <practice-component
      v-else
      :category-id="selectedCategoryId"
      @back="handleBack"
    />
  </div>
</template>

<style lang="less" scoped>
.category-page {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 20px;

  :deep(.van-nav-bar) {
    background: #1890ff;
    
    .van-nav-bar__title,
    .van-nav-bar__text,
    .van-icon {
      color: #fff;
    }
  }

  .category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px;
    margin-top: 8px;

    .category-card {
      height: 44px;
      background: #fff;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      color: #333;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

      &:active {
        transform: scale(0.98);
        background: #f0f0f0;
      }
    }
  }
}
</style>
